<template>
  <a-form auto-label-width layout="inline">
    <div class="component-box">
      <a-form-item label="是否显示">
        <a-switch size="small" v-model="option.xAxis.show" />
      </a-form-item>
      <a-form-item label="位置">
        <a-radio-group size="mini" v-model="option.xAxis.position" type="button">
          <a-radio value="top" label="顶部">顶部</a-radio>
          <a-radio value="bottom" label="底部">底部</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="是否反向">
        <a-switch size="small" v-model="option.xAxis.inverse" />
      </a-form-item>
      <a-form-item label="轴线">
        <a-switch size="small" v-model="option.xAxis.axisLine.show" />
      </a-form-item>
      <a-form-item label="刻度">
        <a-switch size="small" v-model="option.xAxis.axisTick.show" />
      </a-form-item>
    </div>
    <div class="component-box">
      <a-form-item label="显示文字">
        <a-switch size="small" v-model="option.xAxis.axisLabel.show" />
      </a-form-item>
      <template v-if="option.xAxis.axisLabel.show">
        <a-form-item label="标签旋转">
          <xiri-form option="number" v-model="option.xAxis.axisLabel.rotate" :min="-90" :max="90" />
        </a-form-item>
        <a-form-item label="是否换行">
          <a-switch size="small" v-model="option.xAxis.axisLabel.overflow" />
        </a-form-item>
        <a-form-item label="距离">
          <xiri-form option="number" v-model="option.xAxis.axisLabel.margin" :min="0" :max="100" />
        </a-form-item>
        <a-form-item label="显示全部标签">
          <a-switch size="small" v-model="option.xAxis.axisLabel.interval" :customValue="[0, 'auto']" />
        </a-form-item>
        <a-form-item label="字体颜色">
          <xiri-form option="color" v-model="option.xAxis.axisLabel.textStyle.color" />
        </a-form-item>
        <a-form-item label="字体大小">
          <xiri-form option="number" v-model="option.xAxis.axisLabel.textStyle.fontSize" :min="0" :max="100" />
        </a-form-item>
      </template>
    </div>
    <div class="component-box">
      <a-form-item label="网格线">
        <a-switch size="small" v-model="option.xAxis.splitLine.show" />
      </a-form-item>
    </div>
  </a-form>
</template>
<script setup>
defineOptions({
  name: "echarts-xAxis"
})
const attrs = useAttrs()
const option = attrs.option
</script>
<style scoped lang="less">
.bi-bar {
  width: 100%;
  height: 100%;
}
</style>
